<template>
    <div>
      <h2>Record for: {{ rowData.name }}</h2>
      <el-input
        v-model="recordText"
        type="textarea"
        rows="6"
        placeholder="Enter your text here"
        style="width: 100%; margin-bottom: 20px;"
      />
      <el-button type="primary" @click="saveRecord">Save Record</el-button>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  
  const route = useRoute();
  const router = useRouter();
  

  const rowData = JSON.parse(route.query.rowData as string);
  
  
  const recordText = ref('');
  
  
  onMounted(() => {
    
    recordText.value = `Current data for ${rowData.name}: ${rowData.address}`;
  });
  

  const saveRecord = () => {
    console.log('Record saved:', recordText.value);
    router.push('/home');  
  };
  </script>
  
  <style scoped>
  
  </style>
  